<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/jquery.css">
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/foot.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/liebiao.css">
    <link rel="stylesheet" href="../css/gouwuche.css">

    <script src="../js/lunbo.js"></script>
    <style>
        .wrapper label {
            display: flex;
            justify-content: space-between;
        }
        
        .list li {
            display: flex;
            padding: 10px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            justify-content: space-between;
            align-items: center;
            margin-bottom: -1px;
        }
        
        .list img {
            width: 80px;
        }
        
        .list p {
            width: 240px;
        }
        
        .shuliang input {
            text-align: center;
        }
    </style>

</head>

<body>

    <!-- 头部固定区域 -->
    <header>
        <div id="h_con">
            <div class="top_nav">
                <ul>
                    <li>
                        <a href="html/login.html">注册</a>
                    </li>
                    <li>
                        <a href="html/login.html" class="border_r">登录</a>
                    </li>
                    <li>
                        <a href="" class="border_r">我的账户</a>
                        <div class="zhanghu_erji">
                            <p>
                                <a href="">我的订单</a>
                            </p>
                            <p>
                                <a href="">我的优惠券</a>
                            </p>
                        </div>

                    </li>
                    <li>
                        <a href="" class="border_r">客服中心</a>
                        <div class="kefu_erji">
                            <p>
                                <a href="">企业团购</a>
                            </p>
                            <p>
                                <a href="">退换货政策</a>
                            </p>
                            <p>
                                <a href="">在线客服</a>
                            </p>
                            <p>
                                <a href="">订购热线</a>
                            </p>
                            <p>
                                <a href="">400-1985-00</a>
                            </p>
                        </div>
                    </li>
                    <li>
                        <a href="">订单查询</a>
                    </li>
                </ul>
            </div>
            <div class="center_nav">
                <div class="login">
                    <a href="">
                        <img src="../images/logo_03.jpg" alt="">
                    </a>
                </div>
                <div class="sousuo">
                    <a href="">
                        <span>
                            <i></i>
                            搜索
                        </span>
                    </a>
                </div>
                <div class="gouwuche">
                    <a href="">
                        <p>
                            <i></i> 购物车
                            <span>
                                0
                            </span>
                        </p>
                    </a>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航栏部分 -->
    <div id="nav">
        <ul class="navcon same">
            <li><a href="">首页</a></li>
            <li>
                <a href="">春秋新品</a>
                <div class="erji erji_chunqiu">
                    <dl>
                        <dt><a href="javascript:;">男士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                        <dd><a href="javascript:;">配饰</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                        <dd><a href="javascript:;">配饰</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (1).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">主体系列</a>
                <div class="erji erji_zhuti">
                    <dl>
                        <dt><a href="javascript:;">特殊系列</a></dt>

                        <dd><a href="javascript:;">粉彩夏日 胶囊系列</a></dd>
                        <dd><a href="javascript:;">艺术家联名系列</a></dd>
                        <dd><a href="javascript:;">520胶囊系列</a></dd>
                        <dd><a href="javascript:;">朴宰范同款</a></dd>
                        <dd><a href="javascript:;">ONE PLANET系列</a></dd>
                        <dd><a href="javascript:;">LUV THE WORLD系列</a></dd>
                        <dd><a href="javascript:;">ABOUTU系列</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (2).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">Tommy Hilfiger</a>
                <div class="erji erji_hil">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (3).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">Tommy Jeans</a>.
                <div class="erji erji_jeans">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (4).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">男装</a>
                <div class="erji erji_nanzhuang">
                    <dl>
                        <dt><a href="javascript:;">男士</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (5).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">女装</a>
                <div class="erji erji_nvzhuang">
                    <dl>
                        <dt><a href="javascript:;">女士新品</a></dt>

                        <dd><a href="javascript:;">T恤</a></dd>
                        <dd><a href="javascript:;">Polo衫</a></dd>
                        <dd><a href="javascript:;">衬衫</a></dd>
                        <dd><a href="javascript:;">裙装</a></dd>
                        <dd><a href="javascript:;">外套</a></dd>
                        <dd><a href="javascript:;">卫衣</a></dd>
                        <dd><a href="javascript:;">针织衫</a></dd>
                        <dd><a href="javascript:;">裤装</a></dd>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (6).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">童装</a>
                <div class="erji erji_tongzhuang">
                    <dl>
                        <dt>全部男童</dt>
                        <dt>上装</dt>
                        <dt>下装</dt>
                    </dl>
                    <dl>
                        <dt>全部女童</dt>
                        <dt>上装</dt>
                        <dt>下装</dt>
                    </dl>
                    <div class="erji_img">
                        <img src="../images/1 (7).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">配饰</a>
                <div class="erji erji_peishi">
                    <dl>
                        <dt><a href="javascript:;">男士配件</a></dt>

                        <dd><a href="javascript:;">包袋</a></dd>
                        <dd><a href="javascript:;">手表</a></dd>
                        <dd><a href="javascript:;">鞋子</a></dd>
                        <dd><a href="javascript:;">腰带</a></dd>
                        <dd><a href="javascript:;">帽子</a></dd>
                        <dd><a href="javascript:;">内衣</a></dd>
                        <dd><a href="javascript:;">家居服</a></dd>
                        <dd><a href="javascript:;">袜子</a></dd>
                    </dl>

                    <dl>
                        <dt><a href="javascript:;">女士配件</a></dt>

                        <dd><a href="javascript:;">包袋</a></dd>
                        <dd><a href="javascript:;">手表</a></dd>
                        <dd><a href="javascript:;">鞋子</a></dd>
                        <dd><a href="javascript:;">腰带</a></dd>
                        <dd><a href="javascript:;">帽子</a></dd>
                        <dd><a href="javascript:;">内衣</a></dd>
                        <dd><a href="javascript:;">家居服</a></dd>
                        <dd><a href="javascript:;">袜子</a></dd>

                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (8).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">SALE</a>
                <div class="erji erji_sale">
                    <dl>
                        <dt><a href="javascript:;">全部男装</a></dt>

                        <dd><a href="javascript:;">6折专区</a></dd>
                        <dd><a href="javascript:;">7折专区</a></dd>
                        <dd><a href="javascript:;">8折专区</a></dd>
                        <dd><a href="javascript:;">9折专区</a></dd>

                    </dl>

                    <dl>
                        <dt><a href="javascript:;">全部女装</a></dt>

                        <dd><a href="javascript:;">5折专区</a></dd>
                        <dd><a href="javascript:;">6折专区</a></dd>
                        <dd><a href="javascript:;">7折专区</a></dd>
                        <dd><a href="javascript:;">8折专区</a></dd>
                        <dd><a href="javascript:;">9折专区</a></dd>

                    </dl>

                    <div class="erji_img">
                        <img src="../images/1 (9).jpg" alt="">
                    </div>
                </div>
            </li>
            <li><a href="">附近门店</a></li>
        </ul>
    </div>
    <!-- ----------------购物车--------------- -->
    <div class="wrapper same">
        <label>
            <input class="all" type="checkbox" >
            <span>全选</span>
            <span></span>
            <span></span>
            <span>商品</span>
  
            <span></span>
            <span></span>
            <span>颜色</span>
            <span>尺码</span>
           
             <span>单价</span>
             <span></span>
            <span>数量</span>
            
            <span></span>
            <span></span>
           
            
            <span>优惠</span>
            <span>计价</span>
            <span>操作</span>
            
            
        </label>
        <ul class="list">
            <li>
                <input type="checkbox">
                <img src="https://img13.360buyimg.com/n0/s80x80_jfs/t1/183467/4/6796/78417/60b4e580E882c9a9a/a6c5f4b6bbe8c952.jpg.dpg" alt="">
                <p>罗技（G）PRO WIRELESS无线游戏鼠标 GPW狗屁王</p>


                <div class="shuliang">
                    <i class="reduce">-</i>
                    <p><input type="tel" value="1"></p>

                    <i class="add">+</i>
                </div>
                <b>￥59.9</b>

                <strong>删除</strong>
            </li>
        </ul>
        <div>
            总价：￥<span class="total">0.00</span>
        </div>
    </div>
    <script>
        // 获取数据
        let shopArr = JSON.parse(localStorage.getItem('shopArr'))

        // 给所有的单选写个默认值
        shopArr.forEach(ele => {
            ele.flag = false
        })

        let oList = document.querySelector('.list')
        let oTotal = document.querySelector('.total')

        // 渲染数据
        getData()

        function getData() {
            oList.innerHTML = ''

            // 计算总价
            let res = 0

            shopArr.forEach(ele => {
                let str = `<li>
                <input goodsId="${ele.goods_id}" type="checkbox" ${ele.flag ? 'checked' : ''}>
                <img src="${ele.goods_small_logo}"
                    alt="">
                <p>${ele.goods_name}</p>
                <span>红色</span>
                <span>尺寸</span>
                <span>￥${ele.goods_price}</span>
                <div class="shuliang">
                    <i goodsId="${ele.goods_id}" class="reduce">-</i>
                    <input type="tel" value="${ele.count}">
                    <i goodsId="${ele.goods_id}" class="add">+</i>
                </div>
                <span>0.01</span>
                <b>￥${ele.goods_price * ele.count}</b>
                
               
                <strong goodsId="${ele.goods_id}">删除</strong>
            </li>`

                oList.innerHTML += str

                console.log(ele.flag)
                if (ele.flag) {
                    res += ele.goods_price * ele.count
                }
            })

            // 总价
            oTotal.innerHTML = res

            // 把所有更改数据存到本地
            localStorage.setItem('shopArr', JSON.stringify(shopArr))
        }

        // 全选按钮
        let All = document.querySelector('.all')

        All.onchange = function() {
            // console.log(this.checked)
            // 是否全选
            if (this.checked) {
                shopArr.forEach(ele => {
                    ele.flag = true
                })
                count = shopArr.length
            } else {
                shopArr.forEach(ele => {
                    ele.flag = false
                })
                count = 0
            }
            getData()
        }

        // 单选计数
        let count = 0

        oList.onclick = function(ev) {
            // 事件委托
            // 单选按钮
            if (ev.target.type === 'checkbox') {
                let id = ev.target.getAttribute('goodsId')

                shopArr.forEach(ele => {
                    if (ele.goods_id === id) {
                        if (ev.target.checked) {
                            ele.flag = true
                        } else {
                            ele.flag = false
                        }
                    }
                })

                if (ev.target.checked) {
                    count++
                } else {
                    count--
                }

                // console.log(count, shopArr.length)
                if (count === shopArr.length) {
                    All.checked = true
                } else {
                    All.checked = false
                }

                getData()
            }
            // 加
            if (ev.target.className === 'add') {
                let id = ev.target.getAttribute('goodsId')

                // console.log(id)
                shopArr.forEach(ele => {
                    if (ele.goods_id === id) {
                        ele.count++
                            ele.flag = true
                        getData()
                    }
                })
            }
            // 减
            if (ev.target.className === 'reduce') {
                let id = ev.target.getAttribute('goodsId')

                // console.log(id)
                shopArr.forEach(ele => {
                    if (ele.goods_id === id) {
                        ele.count--
                            ele.flag = true

                        if (ele.count < 1) {
                            ele.count = 1
                        }
                        getData()
                    }
                })
            }
            // 删除
            if (ev.target.tagName === 'STRONG') {
                let id = ev.target.getAttribute('goodsId')

                // console.log(id)
                shopArr.forEach((ele, index) => {
                    if (ele.goods_id === id) {
                        shopArr.splice(index, 1)
                        getData()
                    }
                })
            }
        }
    </script>




    <!-- 立即注册 -->
    <div id="join">
        <div class="join-club same">
            <div class="join-club-content">
                <div class="join-club-title">

                    加入MY TOMMY会员俱乐部
                </div>
                <div class="join-club-main">
                    <p>注册即可加入MY TOMMY会员俱乐部，立赠200元礼券。</p>
                    <p>消费满额可升级VIP会员，尊享更多优惠，
                        <a class="check-vip-terms" href="/newActivity/VIPSS21">查看VIP机制与权益</a>
                    </p>
                </div>
            </div>
            <div class="join-club-handel">
                <button class="regist-now register-button">立即注册</button>
                <div class="login-button-wrapper">
                    <div class="login-now login-button">已有账号，立即登录</div>
                </div>
            </div>
        </div>

    </div>
    <!-- 尾部尾部 -->
    <div class="pc-footer-content">
        <div class="pc-footer-main same">
            <div class="pc-footer-logo">
                <img src="images/logo_03.jpg" alt="">
            </div>
            <div class="pc-footer-links">
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        产品探索
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">当季新品</a> </li>
                        <li class="link__item"> <a href="">产品系列</a> </li>
                        <li class="link__item"> <a href="">主题系列</a> </li>
                        <li class="link__item"> <a href="">男装</a> </li>
                        <li class="link__item"> <a href="">女装</a> </li>
                        <li class="link__item"> <a href="">童装</a> </li>
                        <li class="link__item"> <a href="">配件</a> </li>
                    </ul>
                </div>
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        客户服务
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">订单查询</a> </li>
                        <li class="link__item"> <a href="">配送方式及时间</a> </li>
                        <li class="link__item"> <a href="">退换货政策</a> </li>
                        <li class="link__item"> <a href="">尺码指导</a> </li>
                        <li class="link__item"> <a href="">会员机制与权益</a> </li>
                        <li class="link__item"> <a href="">企业团购</a> </li>
                        <li class="link__item"> <a href="">隐私政策</a> </li>
                        <li class="link__item"> <a href="">门店自提/预约/代退货</a> </li>
                    </ul>
                </div>
                <div class="pc-footer-link">
                    <div class="link-title--footer">
                        关于我们
                    </div>
                    <ul class="link-detail">
                        <li class="link__item"> <a href="">品牌故事</a> </li>
                        <li class="link__item"> <a href="">附近门店</a> </li>
                        <li class="link__item">
                            <a href=" target=" _blank ">新浪微博</a> </li>
                        <li class=" link__item "> <a href=" ">假冒产品</a> </li>
                    </ul>
                </div>
                <div class=" pc-footer-link ">
                    <div class=" link-title--footer ">
                        联系我们
                    </div>
                    <ul class=" link-detail ">
                        <li class=" link__item footer-customer-service ">
                            <div class=" customer-service-text ">
                                在线客服（9:00-22:00）
                            </div>
                        </li>
                        <li class=" link__item ">客服电话（400-019-8500）</li>
                        <li class=" link__item "> <a href=" ">发送Email</a> </li>
                    </ul>
                </div>
                <div class=" contact ">
                    <!-- <div class=" qrcode " style=" display: none; ">
                        <img src=" " alt=" ">
                    </div>
                    <div class=" smallprogram "  style=" display: none; ">
                        <img src=" " alt=" ">
                    </div> -->
                    <div class=" contact-detail ">
                        <div class=" contact-title ">
                            关注我们
                        </div>
                        <div class=" contact-type ">
                            <img class=" smallprogram_wechat " src=" " alt=" ">
                            <img class=" wechat " src=" " alt=" ">
                            <a href=" " target=" _blank "> <img src=" " alt=" "> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=" copyright same ">
            <div>
                客服服务时间为：9:00至22:00（全年无休，法定节日除外）
            </div>
            <div class=" links " style=" margin-left: -260px; ">
                <a target=" _blank " href=" " class=" record ">沪ICP备12000910号</a>
            </div>
            <div class=" links ">
                <a target=" _blank " 
                    class=" industrial ">上海工商</a>
            </div>
        </div>
    </div>





</body>

</html>